import { Modal, Space, List } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState } from 'react';
import UserBrief from '@/components/UserBrief'
import { HistoryOutlined } from '@ant-design/icons'
import { historyList, historyDocDetail } from '@/services/doc/common'


const HistoryIcon = (props) => {
    const {
        projectId,
        docId,
        docType,
        showHistory
    } = props;

    const [visible, setVisible] = useState(false)
    const [docHistoryList, setDocHistoryList] = useState([])
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        if (visible) {
            setLoading(true)
            historyList(projectId, docType, docId).then((result) => {
                if (result?.data?.list) {
                    setDocHistoryList([...docHistoryList, ...result?.data?.list])
                    setLoading(false)
                }
            })
        } else {
            setDocHistoryList([])
        }
    }, [visible])

    const viewHistory = (item) => {
        historyDocDetail(projectId, docType, docId, item.id).then((result) => {
            if (showHistory) {
                let ret = showHistory(result?.data)
                if (ret) {
                    setVisible(false)
                }
            } else {
                setVisible(false)
            }
        })
    }
    return (
        <>
            <div className={styles.operIcon} onClick={() => {
                setVisible(true)
            }}>历史<HistoryOutlined /></div>
            <Modal
                title="历史记录"
                visible={visible}
                closable={true}
                onCancel={() => {
                    setVisible(false)
                }}
                footer={null}
            >
                <List
                    dataSource={docHistoryList}
                    loading={loading}
                    renderItem={item => {
                        return <List.Item
                            className={styles.item}
                            actions={[<a key="list-loadmore-edit" onClick={() => {
                                viewHistory(item)
                            }}>查看</a>]}
                        >
                            <List.Item.Meta
                                title={<div>第 {item.docVersions} 版</div>}
                                description={<Space size={4}>{item.createTime} 被 <UserBrief showAvatar={false} user={item.user}></UserBrief> 修改</Space>}
                            />
                        </List.Item>
                    }}
                >
                </List>
            </Modal>
        </>
    )

}

export default HistoryIcon;